﻿@page "/components/collapse"

<Pager Title="Collapse" Description="Toggle the visibility of content across">
		<Demo Title="Example">
		<Description>
			Use <code>Trigger.Toggle(ToggleName.Collapse)</code> and <code>Target</code> to invoke exapnd and collapse.
		</Description>
		<Run>
			<Button Trigger="@(Trigger.Toggle(ToggleName.Collapse).Target("#example-collapse"))">Collapse</Button>
			<Collapse id="example-collapse">
				<p class="mt-3 border p-2">
					Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
				</p>
			</Collapse>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Button Trigger=""@(Trigger.Toggle(BootstrapTriggerName.Collapse).Target(""#example-collapse""))"">Collapse</Button>
<Collapse id=""example-collapse"">
	<p>
		Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
	</p>
</Collapse>
```
			")
		</Code>
	</Demo>

</Pager>